<template>
	<view>
		<button @click="open">打开弹窗</button>
		<uni-popup ref="popup" type="bottom" background-color="#fff" :style="{borderRadius: '10px'}" class="my-popup">
			<!-- <text class="test">hello world!</text>
			<view class="test2">
				<text>hello popup!</text>
			</view> -->
			<view class="total">
				<view class="img">
					<image class="image" src="../../../static/dog.png"></image>
				</view>
				<view class="content">
					<view class="message">
						<view class="name"><text class="name-text">{{goodname}}</text></view>
						<view class="msg"><text class="msg-text">{{message.msg}}</text></view>
						<view class="things"><text class="things-text">{{message.things}}</text></view>
						<view class="medium"><text class="medium-text">{{message.medium}}</text></view>
						<view class="large"><text class="large-text">{{message.large}}</text></view>
					</view>
					<view class="type">
						<view class="type-text"><text>商品规格</text></view>
						<hr>
						<!-- 杯型 -->
						<view class="size">
							<view class="cup"><text class="cup-size">杯型</text></view>
							<view class="cup-size-btn">
								<view v-for="(item, index) in cupSize" :key="index" class="select">
								    <uni-radio :value="item.value" :checked="item.checked">
								        <button class="custom-radio" @click="handleClick(index)">
											{{item.label}}
								        </button>
								    </uni-radio>
								</view>
							</view>
						</view>
						
						<!-- 温度 -->
						<view class="temp">
							<view class="ice"><text class="ice-text">温度</text></view>
							<view class="ice-temp">
								<view v-for="(item, index) in tempreture" :key="index" class="select">
									<uni-radio :value="item.value" :checked="item.checked">
									    <button class="custom-radio" @click="handleClick(index)">
											{{item.label}}
									    </button>
									</uni-radio>
								</view>
							</view>
						</view>
						
						<!-- 甜度 -->
						<view class="sweet">
							<view class="sugar"><text class="sugar-text">糖度</text></view>
							<view class="sugar-temp">
								<view v-for="(item, index) in sweet" :key="index" class="select">
									<uni-radio :value="item.value" :checked="item.checked">
									    <button class="custom-radio" @click="handleClick(index)">
											{{item.label}}
									    </button>
									</uni-radio>
								</view>
							</view>
						</view>
						
					</view>
					
					<view class="fixed-bottom">
						<hr>
						<view class="mount"><text class="mount-text">￥6</text></view>
						<view class="deteil-msg"><text class="detail-text">中杯/正常/正常糖</text></view>
						<view class="select-btn">
							<view class="buy"><button class="buy-btn">立即购买</button></view>
							<view class="shoppingcart"><button class="shoppingcart-btn">加入购物车</button></view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
export default {
   
	data(){
		return{
		    goodname:"珍珠奶茶",
		    message:{
			    msg: "珍珠Q弹，奶茶经典",
			    things: "珍珠、浓缩奶茶(红茶叶，奶茶粉)",
				medium: "杯容量505ml",
				large: "杯容量660ml"
			},
			cupSize: [  
		        { label: '选项1', value: '1', checked: false },  
		        { label: '选项2', value: '2', checked: false },  
		        { label: '选项3', value: '3', checked: false },
				{ label: '选项4', value: '3', checked: false }
		    ],
			tempreture: [
				{label: '正常冰'},
				{label: '少冰'},
				{label: '热'}
			],
			sweet: [
				{label: '正常糖'},
				{label: '七分糖'},
				{label: '五分糖'}
			]
		}
	},
	
	watch: {
		cupSize(newVal){
			console.log(newVal);
		}
	},
   
    methods:{
       open(){
            // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
            this.$refs.popup.open()
       }
    }
}
</script>

<style>
	.my-popup{
		
	}
	.total{
		/* border-radius: 10px; */
		height: 550px;
		overflow: auto;
	}
	.content{
		position: relative; /* 设置一个相对定位的父容器 */ 
		
	}
	.custom-radio {  
	  /* 自定义样式，可以根据需要修改 */  
		display: inline-block;  
	    margin-right: 10px;  
	}
	.message{
		/* height: 100px; */
		padding-left: 10px;
		margin-bottom: 40px;
	}
	.name{
		font-size: 20px;
		font-weight: bold;
		margin-top: 10px;
		margin-bottom: 15px;
	}
	.msg{
		font-size: 14px;
		color: #B3B3B3;
	}
	.things{
		font-size: 14px;
		color: #B3B3B3;
	}
	.medium{
		font-size: 14px;
		color: #B3B3B3;
	}
	.large{
		font-size: 14px;
		color: #B3B3B3;
	}
	.type{
		margin-bottom: 200px;
		padding-left: 10px;
		padding-right: 10px;
	}
	.type-text{
		margin-bottom: 10px;
		font-size: 18px;
	}
	.cup{
		margin-top: 10px;
		color: #B3B3B3;
		margin-bottom: 10px;
	}
	.cup-size-btn{
		display: flex;
	}
	.temp{
		margin-top: 10px;
		margin-bottom: 10px;
		color: #B3B3B3;
	}
	.ice-temp{
		display: flex;
	}
	.sugar-temp{
		display: flex;
	}
	.sweet{
		margin-top: 10px;
		color: #B3B3B3;
	}
	.select{
		display: flex;
	}
	.fixed-bottom {
	    position: fixed; /* 让 view 固定在底部 */  
	    bottom: 0; /* 距离底部为 0 */  
	    width: 100%; /* 宽度为 100% */  
	    background-color: #FFFFFF;
		height: 150px;
	}
	.mount{
		padding-left: 10px;
		padding-top: 10px;
	}
	.mount-text{
		font-size: 18px;
		font-weight: bold;
	}
	.deteil-msg{
		padding-left: 10px;
		margin-bottom: 20px;
	}
	.detail-text{
		font-size: 14px;
		color: #B3B3B3;
	}
	.select-btn{
		display: flex;
		padding-left: 10px;
		padding-right: 10px;
	}
	.buy{
		flex: 1;
		margin-right: 10px;
	}
	.shoppingcart{
		flex: 1;
	}
	hr{
		border: none;
		border-top: 1px solid rgba(200,178,170, 0.2);
	}
</style>